<template>
  <PageContainer>
    <Header
      v-model="headerHeight"
      title="会员中心"
      :is-box-height="true"
      title-color="#fff"
      variety-title-color="#000"
      transparent="auto"
    />
    <view class="container">
      <view class="container-arc">
        <view class="container-content">
          <view class="level-multiply-img"></view>
          <view :style="{ width: '100%', height: headerHeight + 'px' }"></view>
          <view class="search-view">
            <view class="search-view__content" @click="handleSeeMore()">
              <text class="ali-icon">&#xe694;</text>
              <text>搜索福利</text>
            </view>
          </view>
          <view class="user-info">
            <view class="avatar" style="border: 1px solid rgba(255, 255, 255, 0.5)">
              <TImage
                :src="userInfo?.avatar"
                width="100%"
                height="100%"
                border-radius="50%"
                error-img-type="person"
              />
            </view>
            <view class="user-name">
              <text>{{ userInfo?.userName }}</text>
              <text v-if="greetingMsgText">，{{ greetingMsgText }}</text>
            </view>
          </view>
          <view
            class="member-level-card"
            :style="{
              backgroundImage: `url(${getCocInfo?.levelImageUrl})`,
            }"
          >
            <view style="display: flex; align-items: center">
              <image :src="getCocInfo?.iconUrl" style="width: 48rpx; height: 48rpx" />
              <view
                :style="{
                  color: getCocInfo?.styleType,
                  fontWeight: 'bolder',
                  marginLeft: '16rpx',
                  fontSize: '48rpx',
                }"
              >
                <text>{{ getCocInfo?.levelName }}</text>
              </view>
            </view>
            <view :style="{ color: getCocInfo?.styleType, fontSize: '24rpx', marginTop: '8rpx' }">
              <text>{{ formatToDate(getCocInfo?.memberEndTime) + '到期' }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <Paglist
      v-model="dataList"
      :is-init-api="true"
      :is-show-loadmore="false"
      :scroll-top-bottom="240"
      @register="register"
    >
      <template v-for="(v, i) in dataList" :key="v.id">
        <view>
          <PromotionArea :item="v" @handle-see-more="handleSeeMore(v)" />
        </view>
      </template>
    </Paglist>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* memberWelfareCenter 会员中心 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { computed, provide, ref } from 'vue';
  import { storeToRefs } from 'pinia';
  import { onPageScroll } from '@dcloudio/uni-app';
  import { shopLevelProductPage } from '@/api/mall';
  import TImage from '@/components/TImage/index.vue';
  import { formatToDate, getGreetingMsg } from '@/utils/dateUtil';
  import PromotionArea from '../components/PromotionArea.vue';
  import type { GetHomeRecommendPageResult } from '@/api/mall/types';
  import { navigateTo } from '@/router';

  const useUser = useUserStoreWithOut();
  const { userInfo, cocInfo } = storeToRefs(useUser);
  const getCocInfo = computed(() => cocInfo.value);

  const headerHeight = ref(87);

  const dataList = ref<GetHomeRecommendPageResult[]>([]);
  provide('api', shopLevelProductPage);
  const [register] = useConList();

  function handleSeeMore(item?: GetHomeRecommendPageResult) {
    navigateTo({
      name: 'moreMemberWelfareProduct',
      options: {
        levelDataId: item?.id,
      },
    });
  }

  const greetingMsgText = ref('');
  greetingMsgText.value = getGreetingMsg();

  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
  .container {
    box-sizing: border-box;
    width: 100%;
    height: 624rpx;
    position: relative;
    z-index: 10;
    overflow: hidden;
    &-arc {
      width: 140%;
      height: 100%;
      background-color: #111;
      overflow: hidden;
      position: absolute;
      left: -20%;
      z-index: -1;
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
    }
    &-content {
      width: 100vw;
      height: 100%;
      margin: 0 auto;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      .search-view {
        width: 100%;
        height: 104rpx;
        padding: 16rpx 32rpx;
        box-sizing: border-box;
        &__content {
          height: 100%;
          color: #fff;
          font-size: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: rgba($color: #fff, $alpha: 0.4);
          border: 1px solid rgba($color: #fff, $alpha: 0.4);
          border-radius: 64rpx;
          .ali-icon {
            font-size: 32rpx;
            margin-right: 8rpx;
          }
        }
      }
      .user-info {
        width: 100%;
        height: 80rpx;
        padding: 0 32rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .avatar {
          margin-right: 16rpx;
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          overflow: hidden;
        }
        .user-name {
          font-weight: bolder;
          color: #fff;
          font-size: 36rpx;
        }
      }

      .member-level-card {
        padding: 32rpx;
        width: calc(100% - 64rpx);
        height: 200rpx;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
      }
    }
    .level-multiply-img {
      width: 100vw;
      height: 472rpx;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      background-color: #111;
      background-image: url(https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/level/bj-1001.png);
      background-repeat: no-repeat;
      background-size: 100vw 100%;
      background-position: center;
      background-blend-mode: multiply;
    }
  }
</style>
